<template>
  <div>
    <input type="text" v-model="textValue" placeholder="请输入文本" />
    <div style="margin-top: 20px;">{{ hintValue }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textValue: "",
      hintValue: "",
    };
  },
  watch: {
    textValue: {
      handler(newValue, oldValue) {
        if (newValue.length < 5) this.hintValue = "你输入的文本太短了";

        if (newValue.length === 5) this.hintValue = "你输入的文本内容正常";

        if (newValue.length > 5) this.hintValue = "你输入的文本太长了";
      },
      immediate: true, // 立即执行一次
      deep: true, // 深度监听
    },
    // 不需要深度监听和立即执行可以使用下方的简写形式
    // textValue(newValue, oldValue) {
    //   console.log(`textValue changed: ${newValue}`);
    // },
  },
};
</script>
